Setting Up ESLint

INSTRUCTOR NOTE:

ESLint with Atom

Using Atom? Follow the instructions below to get up and running ESLint up and running!

1. Install linter and linter-eslint packages

First, head into the Install section of Atom's Settings. Recall that you can quickly get into the settings by using the shortcut ⌘ + , on Mac (or Ctrl + , on Windows). Use the search bar to find and install the following packages:

Feel free to click on each of the above links for more information on each package, though it's not necessary. Just be sure they're successfully installed in Atom before moving on!

2. Install ESLint and a configuration

Now, let's configure ESLint! Head into the root directory of the project you're working on. Create a file named .eslintrc, which represents the configuration file of the ESLint rules you choose to implement. Feel free to check out this list of configs for a few you can choose from.

For example, if we choose to use Google's configurations, we'll go ahead and install it with the following command in the terminal (make sure you're in your project's root directory):

npm install --save-dev eslint eslint-config-google

Note that you can install ESLint globally as well, if you choose.

**3. Update .eslintrc **

To wrap things up, add this code to your .eslintrc file:

{
  “extends”: “eslint-config-google”
}

At this point, try things out in Atom! If you don't see any errors or warnings, feel free to close Atom completely and re-open. How do things look?

ESLint with Visual Studio Code

If you're using VS Code, check out the following instructions to get ESLint installed:

1. Get the ESLint Extension

Open up VS Code and click on the Extensions icon on the sidebar. Recall that alternatively, you can use the command ⌘ + ⇧ + X on Mac (or Ctrl + Shift + X on Windows) to see this menu.

In the search bar, search and download ESlint. This integrates ESLint into VS Code.

2. Install ESLint

You can install ESLint locally (i.e., within a single workspace folder, like in the Atom instructions above), or globally. For the latter, go ahead and enter the following command in the terminal:

npm install -g eslint

Note that this may take a few moments!

3. Configure ESLint

Next, in the terminal, make sure you're in the root directory of your project (if you had installed ESLint locally, you should already be there). Enter the following command in the terminal:

eslint --init

You'll be asked a series of questions as to how you'd like to configure ESLint. Feel free to choose Use a popular style guide for a quick recommended setup, or select one of the other two options below it to further customize ESLint.

When you're all done, try things out in VS Code! Again, if you don't see any errors or warnings, feel free to close VS Code completely and re-open. How do things look?

Next Concept